<template>
  <el-card shadow="hover" style="margin: 20px;height: 70px">
    <el-form label-width="100px">
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="申请单号">
            <el-input v-model="searchForm.applyNumber" placeholder="请输入申请单号"/>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="申请人姓名">
            <el-input v-model="searchForm.username" placeholder="请输入申请人姓名"/>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="申请类型">
            <el-select v-model="searchForm.type" placeholder="请选择申请类型">
              <el-option v-for="item in applyTypeList"
                         :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <el-card style="margin: 20px;height: 730px">
    <div style="margin:10px 0 40px 10px;">
      <el-radio-group v-model="searchType">
        <el-radio-button value="50" size="large" @change="search">待分配</el-radio-button>
        <el-radio-button value="60" size="large" @change="search">已分配</el-radio-button>
        <el-radio-button value="70" size="large" @change="search">分配失败</el-radio-button>
      </el-radio-group>
    </div>
    <el-table ref="multipleTableRef"
              :data="paginatedData" stripe
              style="margin-top: 20px;height: 560px">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column label="申请单号" prop="applyNumber" align="center"/>
      <el-table-column label="申请人姓名" prop="username" align="center"/>
      <el-table-column label="手机号" prop="phone" width="110" align="center"/>
      <el-table-column label="部门所属" prop="department" align="center"
                       :formatter="departmentFormatter"/>
      <el-table-column label="申请类型" prop="type" align="center"
                       :formatter="applyTypeFormatter"/>
      <el-table-column label="申请状态" prop="status" align="center"
                       :formatter="applyStatusFormatter"/>
      <el-table-column label="操作" width="280px" align="center">
        <template #default="scope">
          <el-button type="primary" link
                     v-if="scope.row.type === 'busrequire'"
                     @click="busrequire(scope.row.id)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableData.length"
        @current-change="handlePageChange"
        style="margin-top:20px;margin-left:  35%"
    />

  </el-card>

  <!-- 车辆审批/查看弹窗 -->
  <el-dialog title="查看详情"
             :width="800"
             style="padding: 40px"
             v-model="busrequireVisible">
    <el-descriptions direction="horizontal" :column="2" border>
      <el-descriptions-item label="申请人">{{ busrequireData.username }}</el-descriptions-item>
      <el-descriptions-item label="申请人手机号">{{ busrequireData.phone }}</el-descriptions-item>
      <el-descriptions-item label="申请人邮箱">{{ busrequireData.email }}</el-descriptions-item>
      <el-descriptions-item label="申请人部门">
        {{ departmentFormatter(busrequireData,null,busrequireData.department) }}
      </el-descriptions-item>
      <el-descriptions-item label="使用开始时间">{{ busrequireData.startTime }}</el-descriptions-item>
      <el-descriptions-item label="使用结束时间">{{ busrequireData.endTime }}</el-descriptions-item>
      <el-descriptions-item label="车辆出发地">{{ busrequireData.startPoint }}</el-descriptions-item>
      <el-descriptions-item label="车辆目的地">{{ busrequireData.endPoint }}</el-descriptions-item>
      <el-descriptions-item label="申请时间">{{ busrequireData.createTime }}</el-descriptions-item>
      <el-descriptions-item label="人数">{{ busrequireData.people }}</el-descriptions-item>
      <el-descriptions-item label="申请原因">{{ busrequireData.reason }}</el-descriptions-item>
      <!--  驳回原因要在点击驳回才显示 -->
      <el-descriptions-item label="驳回原因" v-if="busrequireData.status==40">
        {{busrequireData.rejectReason}}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div v-if="busrequireData.status==50">
        <el-button type="info" @click="busrequireVisible = false">关闭</el-button>
        <el-button type="primary">分配车辆</el-button>
        <el-button type="primary" @click="driversVisible = true">分配司机</el-button>
        <el-button type="danger" >驳回</el-button>
      </div>
    </template>
  </el-dialog>
<!--分配司机-->
  <el-dialog title="分配司机"
             :width="600"
             style="padding: 40px"
             v-model="driversVisible">
    <el-table :data="driverData">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="username" label="司机姓名" align="center"/>
      <el-table-column prop="phone" label="手机号" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary"
                     @click="driver(scope.row.id)"
                     link>分配
          </el-button>
        </template>
      </el-table-column>
    </el-table>
</el-dialog>
<!--分配车辆-->
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";


const applyStatusList = ref([]);
const applyTypeList = ref([]);
const departmentList = ref([]);
onMounted(() => {
  loadDictOptions(applyStatusList, 'applyStatus');
  loadDictOptions(applyTypeList, 'applyType')
  loadDictOptions(departmentList, 'department')
});
const applyStatusFormatter = (row, column, cellValue, index) => {
  if (!applyStatusList.value) {
    return cellValue;
  }
  for (let item of applyStatusList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
};
const applyTypeFormatter = (row, column, cellValue, index) => {
  if (!applyTypeList.value) {
    return cellValue;
  }
  for (let item of applyTypeList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
};
const departmentFormatter = (row, column, cellValue, index) => {
  if (!departmentList.value) {
    return cellValue;
  }
  for (let item of departmentList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
};
const tableData = ref([]);
const currentPage = ref(1);// 默认显示页码
const pageSize = ref(10); // 每页显示6条


// 计算当前页面的数据
const paginatedData = computed(() => {
  const offset = (currentPage.value - 1) * pageSize.value;
  return tableData.value.slice(offset, offset + pageSize.value);
});
// 分页变化时触发
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
};
const searchForm = ref({
  applyNumber: '',
  username: '',
  type: ''
});
const searchType = ref('50');
const search = () => {
  if (searchType.value === '50') {
    searchForm.value.status = 50;
  } else if (searchType.value === '60') {
    searchForm.value.status = 60;
  } else if (searchType.value === '70') {
    searchForm.value.status = 70;
  }
  let data = qs.stringify(searchForm.value);
  axios.get(BASE_URL + "/v1/application/select?" + data)
      .then((response) => {
        if (response.data.code === 2000) {
          tableData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })
}
onMounted(() => {
  search();
});
const resetSearch = () => {
  searchForm.value = {
    applyNumber: '',
    username: '',
    status: 50,
    type: ''
  };
  search();
};
const busrequireVisible = ref(false);
const busrequireData = ref({});
const busrequireId = ref();
const busrequire = (id) => {
  busrequireVisible.value = true;
  busrequireId.value = id;
  axios.get(BASE_URL + '/v1/application/select/busrequire/' + id)
      .then((response) => {
        if (response.data.code === 2000) {
          busrequireData.value = response.data.data[0];
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          })
        }
      })
}

const driversVisible = ref(false);
const driverData = ref([]);
const selectDrivers = () => {
  axios.get(BASE_URL + '/v1/user/select/drivers')
      .then((response) => {
        if (response.data.code === 2000) {
          driverData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          })
        }
      })
}
onMounted(() => {
  selectDrivers();
})
const driver = (id) => {
  let data = qs.stringify({
    applyId: busrequireId.value,
    id: busrequireData.value.id,
    driver: id,
    driverName: driverData.value[0].username,
    status : 70
  });
  axios.post(BASE_URL + "/v1/busrequire/driver/" ,data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('分配司机成功');
          driversVisible.value = false;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })
}
</script>

<style scoped>

</style>